Click to Pay Integration

Implement Click to Pay for streamlined checkout, allowing customers to make secure payments without manually entering card details.

This guide walks you through adding Click to Pay to an existing Connected Payments payment page. There are three stages:

Understand the service — what Click to Pay is and how it works
Configure your customer config — enable and set up Click to Pay via the dashboard
Embedded iFrame setup — additional steps required for iFrame-based integrations

Overview

Click to Pay is a checkout experience service provided by Mastercard. The functionality is activated by updating the customer config JSON through the CommBank Connected Payments dashboard.

To activate Click to Pay, your customer config must include:

A mastercardClickToPaySettings object containing at minimum your srcDpaId, merchant name, and locale
The Click to Pay form components in your payment form config (all components except the single card component — this can be used in a confirmation form to show the selected card)

info

Click to Pay is enabled via a toggle in the Connected Payments dashboard. Once enabled, configure the settings below.

Step 1 — Configure Click to Pay in the Dashboard

Log in to your Connected Payments account and navigate to the Customer Configs section.
Select the config you want to enable Click to Pay for and click Edit.
Go to Configuration and locate the Click to Pay Settings section.
Enable the service and update the settings as required (see configuration reference below).
Click Save to apply the changes.

Configuration Reference

Required fields

Field	Type	Example	Description
`srcDpaId`	`string`	`"dpaId"`	DPA ID generated for the merchant by Mastercard.
`cardBrands`	`string[]`	`["visa", "mastercard", "amex"]`	Accepted card brands. Also controls the display order of card components.
`dpaLocale`	`string`	`"en_US"`	Merchant preferred locale in `language_country` pair format.
`dpaName`	`string`	`"connected payments"`	Legal name of the merchant.

Optional fields

Field	Type	Example	Description
`dpaPresentationName`	`string`	`"connected payments"`	Merchant name displayed on screen.
`coBrandNames`	`string[]`	`[]`	List of co-branded partners.
`dpaAcceptedBillingCountries`	`string[]`	`["US", "AU"]`	List of accepted billing countries.
`dpaAcceptedShippingCountries`	`string[]`	`["US", "AU"]`	List of accepted shipping countries.
`dpaBillingPreference`	`string`	`"NONE"`	Level of billing address detail required. Options: `FULL`, `NONE`, `POSTAL_COUNTRY`.
`dpaShippingPreference`	`string`	`"NONE"`	Level of shipping address detail required. Options: `FULL`, `NONE`, `POSTAL_COUNTRY`.
`consumerNameRequested`	`boolean`	`false`	Include consumer name in the final payload.
`consumerEmailAddressRequested`	`boolean`	`false`	Include consumer email address in the final payload.
`consumerPhoneNumberRequested`	`boolean`	`false`	Include consumer phone number in the final payload.
`threeDsPreference`	`string`	`"NONE"`	Merchant's 3DS preference. This feature is not currently available — must be set to `"NONE"`.
`clickToPayOptInNotification`	`string`	`"Notification text"`	Opt-in notification message shown to the consumer.

Step 2 — Customer Config Example

Below is a full example of a customer config with Click to Pay enabled:

{
  "appConfig": {
    "base": {
      "mastercardClickToPaySettings": {
        "srcDpaId": "dpaId",
        "cardBrands": ["visa", "mastercard", "amex"],
        "dpaLocale": "en_US",
        "dpaName": "connected payments",
        "dpaPresentationName": "connected payments",
        "coBrandNames": [],
        "dpaAcceptedBillingCountries": ["US", "AU"],
        "dpaAcceptedShippingCountries": ["US", "AU"],
        "dpaBillingPreference": "NONE",
        "dpaShippingPreference": "NONE",
        "consumerNameRequested": false,
        "consumerEmailAddressRequested": false,
        "consumerPhoneNumberRequested": false,
        "threeDsPreference": "NONE",
        "clickToPayOptInNotification": "Notification text"
      }
    }
  },
  "appHTML": {
    "payment": {
      "body": {
        "tag": "div",
        "children": [
          {
            "type": "form",
            "formType": "mastercardClickToPay",
            "name": "iframe-form"
          }
        ]
      }
    }
  }
}

Step 3 — Embedded iFrame Setup

If your payment page is embedded inside an iFrame, you must also include the Connected Payments Mastercard script in your application for the Click to Pay service to function correctly.

Add the following <script> tag to your application:

<script
  type="text/javascript"
  src="https://localhost:3000/scripts/connected-payments-mastercard-click-to-pay.js"
/>

Update the script URL

The URL above must point to the correct environment. The example path https://localhost:3000/ is for local development only — replace it with the appropriate URL for your staging or production environment before going live.

Overview​

Step 1 — Configure Click to Pay in the Dashboard​

Configuration Reference​

Required fields​

Optional fields​

Step 2 — Customer Config Example​

Step 3 — Embedded iFrame Setup​